<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
  >
    <el-menu-item style="margin-left: 400px" index="4">
      <router-link to="/front/main2">菜单页面</router-link>
    </el-menu-item>
    <el-menu-item index="1">
      <router-link to="/front/cart">购物车</router-link>
    </el-menu-item>
    <el-sub-menu >
      <template #title>个人中心</template>
      <el-menu-item index="2-1">
        <router-link to="/front/order">我的订单</router-link>
      </el-menu-item>
      <el-menu-item index="2-2">修改密码</el-menu-item>
      <el-menu-item index="2-3" @click="outLogin">退出登录</el-menu-item>
    </el-sub-menu>
<!--    <el-menu-item index="3" disabled>Info</el-menu-item>-->
    <el-menu-item index="3" style="margin-left: 400px">
      <router-link to="/front/login">登录</router-link>
    </el-menu-item>
  </el-menu>
  <router-view></router-view>
</template>

<script setup>
import router from "../../router/index.js";
import {onMounted} from "vue";
onMounted(() => {
  window.onbeforeunload = function (e) {
    let storage = window.localStorage;
    storage.clear();
  };
})
const outLogin = () => {
  let storage = window.localStorage;
  storage.clear();
  router.push("/front/login")
}
</script>

<style scoped>

</style>